<template>
  <div class='qr-code-wrapper'
       :style='{width: width + "px", height: height + "px"}'
       ref='qrCodeWrapper'>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'
export default {
  data () {
    return {
      qrCode: {}
    }
  },
  props: {
    width: {
      type: Number,
      default: 200
    },
    height: {
      type: Number,
      default: 200
    },
    colorFront: {
      type: String,
      default: '#000'
    },
    colorBack: {
      type: String,
      default: '#fff'
    },
    url: {
      type: String,
      default: ''
    }
  },
  watch: {
    url (newV) {
      this.initQrCode()
    }
  },
  methods: {
    initQrCode () {
      document.querySelector('.qr-code-wrapper').innerHTML = ''
      this.$nextTick(() => {
        this.qrCode = new QRCode(this.$refs.qrCodeWrapper, {
          text: this.url,
          width: this.width,
          height: this.height,
          colorDark: this.colorFront, // 前景色
          colorLight: this.colorBack, // 背景色
          correctLevel: QRCode.CorrectLevel.L // 容错率级别 L M Q H
        })
      })
    }
  },
  mounted () {
    this.initQrCode()
  }
}
</script>

<style lang="stylus" scoped>

</style>
